<!-- 图表页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>区块链管理</title>
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../../../../content/pc/sysmgt/blockchainManagement/blockchainManagement.css"/>
</head>
<body class="layui-view-body outside-container">
  <!-- 标题 -->
  <p class="title-h">区块链管理</p>
  <div class="cards-outside-container">
    <!-- 按钮 -->
    <div class="btns-container">
        <button type="button" class="btn btn-primary btnColor" id="createNewChain">新建区块链</button>
    </div>
    <div class="cards-container">
        <div class="card-div" title="1">
            <div class="head-card">
                <div class="head-card-text">
                    <p>组织数</p>
                    <p class="font-20 marginTop-12">4</p>
                </div>
                <div class="head-card-text">
                    <p>节点总数</p>
                    <p class="font-20 marginTop-12">4</p>
                </div>
                <div class="head-card-text">
                    <div class="ellipsis-div">
                        <p class="ellipsis-p"></p>
                    </div>
                </div>
            </div>
            <div class="main-card-conatiner">
                <p class="font-14">
                    <span>chain1</span>
                    <span class="red-circle">已失效</span>
                </p>
                <p class="text-p">
                    <span class="color-text">区块链ID</span>
                    <span class="color-value">chain1</span>
                </p>
                <p class="text-p">
                    <span class="color-text">账户模式</span>
                    <span class="color-value">permissionedWithCert</span>
                </p>
                <p class="text-p">
                    <span class="color-text">创建时间</span>
                    <span class="color-value">2023-11-26 20:10:49</span>
                </p>
            </div>
        </div>
        <div class="card-div">
            <div class="head-card">
                <div class="head-card-text">
                    <p>组织数</p>
                    <p class="font-20 marginTop-12">4</p>
                </div>
                <div class="head-card-text">
                    <p>节点总数</p>
                    <p class="font-20 marginTop-12">4</p>
                </div>
                <div class="head-card-text">
                    <div class="ellipsis-div">
                        <p class="ellipsis-p"></p>
                    </div>
                </div>
            </div>
            <div class="main-card-conatiner">
                <p class="font-14">
                    <span>chain1</span>
                    <span class="red-circle">已失效</span>
                </p>
                <p class="text-p">
                    <span class="color-text">区块链ID</span>
                    <span class="color-value">chain1</span>
                </p>
                <p class="text-p">
                    <span class="color-text">账户模式</span>
                    <span class="color-value">permissionedWithCert</span>
                </p>
                <p class="text-p">
                    <span class="color-text">创建时间</span>
                    <span class="color-value">2023-11-26 20:10:49</span>
                </p>
            </div>
        </div>
        <div class="card-div">
            <div class="head-card">
                <div class="head-card-text">
                    <p>组织数</p>
                    <p class="font-20 marginTop-12">4</p>
                </div>
                <div class="head-card-text">
                    <p>节点总数</p>
                    <p class="font-20 marginTop-12">4</p>
                </div>
                <div class="head-card-text">
                    <div class="ellipsis-div">
                        <p class="ellipsis-p"></p>
                    </div>
                </div>
            </div>
            <div class="main-card-conatiner">
                <p class="font-14">
                    <span>chain1</span>
                    <span class="red-circle">已失效</span>
                </p>
                <p class="text-p">
                    <span class="color-text">区块链ID</span>
                    <span class="color-value">chain1</span>
                </p>
                <p class="text-p">
                    <span class="color-text">账户模式</span>
                    <span class="color-value">permissionedWithCert</span>
                </p>
                <p class="text-p">
                    <span class="color-text">创建时间</span>
                    <span class="color-value">2023-11-26 20:10:49</span>
                </p>
            </div>
        </div>
    </div>
  </div>
<script src="../../../../../lib/jquery/jquery.min.js"></script>
<script src="../../../../../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../../../../../lib/echarts4.4/echarts.min.js"></script>
<script>
    //新建区块链 点击事件
    $('#createNewChain').on('click',function(){
        
    });
    //请求链卡片---接口
    function loadCardDataFun(){
        //页面渲染
    }
    //卡片点击事件
    $('.card-div').on('click',function(e){
        console.log( $(e.currentTarget).attr('title'));//绑定数据
        // $(e).attr('title')
    });
    $(document).ready(function() {
        //请求链卡片---接口
        loadCardDataFun();
        //

    }) 
</script>
</body>
</html>